<!DOCTYPE html>
<html>

<head>
    <title>学生</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="./css/home.css">
    <script src="./js/moment.min.js"></script>
    <!-- token校验 -->
    <script src="./js/checkLogin.js"></script>
    <!-- 导入axios -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <!-- 导入进度条 -->
    <script src="./js/nprogress.min.js"></script>
    <link rel="stylesheet" href="./css/nprogress.min.css">
</head>

<body>
    <main>
        <!-- 侧边栏 -->
        <div class="d-flex flex-column flex-shrink-0 p-3 text-white" id="contract" style="width: 280px;background-color: #3B95DD;position: relative;">
            <a href="##" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
                <span class="fs-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                        class="bi bi-house-x-fill" viewBox="0 0 16 16">
                        <path
                            d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z" />
                        <path d="m8 3.293 4.712 4.712A4.5 4.5 0 0 0 8.758 15H3.5A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z" />
                        <path fill-rule="evenodd"
                            d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm-.646-4.854a.5.5 0 0 0-.708.708l.647.646-.647.646a.5.5 0 0 0 .708.708l.646-.647.646.647a.5.5 0 0 0 .708-.707l-.647-.647.647-.646a.5.5 0 0 0-.708-.707l-.646.646-.646-.646Z" />
                    </svg>
                    晨锋管理
                </span>
                <!-- 收缩和展开 -->
                <span style="position: absolute;top: 20px;right: 0;" onclick="handlercontract()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x2-gap-fill" viewBox="0 0 16 16">
                    <path d="M1 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zM1 9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V9z"/>
                    </svg>
                </span>
            </a>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
                <li class="nav-item">
                    <a href="./home.html" class="nav-link text-white" aria-current="page">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-hurricane" viewBox="0 0 16 16">
                            <path
                                d="M6.999 2.6A5.5 5.5 0 0 1 15 7.5a.5.5 0 0 0 1 0 6.5 6.5 0 1 0-13 0 5 5 0 0 0 6.001 4.9A5.5 5.5 0 0 1 1 7.5a.5.5 0 0 0-1 0 6.5 6.5 0 1 0 13 0 5 5 0 0 0-6.001-4.9zM10 7.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
                        </svg>
                        主页
                    </a>
                </li>
                <li id="adminLevel">
                    <a href="./admin.html" class="nav-link text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-incognito" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="m4.736 1.968-.892 3.269-.014.058C2.113 5.568 1 6.006 1 6.5 1 7.328 4.134 8 8 8s7-.672 7-1.5c0-.494-1.113-.932-2.83-1.205a1.032 1.032 0 0 0-.014-.058l-.892-3.27c-.146-.533-.698-.849-1.239-.734C9.411 1.363 8.62 1.5 8 1.5c-.62 0-1.411-.136-2.025-.267-.541-.115-1.093.2-1.239.735Zm.015 3.867a.25.25 0 0 1 .274-.224c.9.092 1.91.143 2.975.143a29.58 29.58 0 0 0 2.975-.143.25.25 0 0 1 .05.498c-.918.093-1.944.145-3.025.145s-2.107-.052-3.025-.145a.25.25 0 0 1-.224-.274ZM3.5 10h2a.5.5 0 0 1 .5.5v1a1.5 1.5 0 0 1-3 0v-1a.5.5 0 0 1 .5-.5Zm-1.5.5c0-.175.03-.344.085-.5H2a.5.5 0 0 1 0-1h3.5a1.5 1.5 0 0 1 1.488 1.312 3.5 3.5 0 0 1 2.024 0A1.5 1.5 0 0 1 10.5 9H14a.5.5 0 0 1 0 1h-.085c.055.156.085.325.085.5v1a2.5 2.5 0 0 1-5 0v-.14l-.21-.07a2.5 2.5 0 0 0-1.58 0l-.21.07v.14a2.5 2.5 0 0 1-5 0v-1Zm8.5-.5h2a.5.5 0 0 1 .5.5v1a1.5 1.5 0 0 1-3 0v-1a.5.5 0 0 1 .5-.5Z" />
                        </svg>
                        管理员
                    </a>
                </li>
                <li>
                    <a href="./student.html" class="nav-link active">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-people-fill" viewBox="0 0 16 16">
                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                            <path fill-rule="evenodd"
                                d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z" />
                            <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
                        </svg>
                        学生管理
                    </a>
                </li>
                <li>
                    <a href="./clazz.html" class="nav-link text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-windows" viewBox="0 0 16 16">
                            <path
                                d="M6.555 1.375 0 2.237v5.45h6.555V1.375zM0 13.795l6.555.933V8.313H0v5.482zm7.278-5.4.026 6.378L16 16V8.395H7.278zM16 0 7.33 1.244v6.414H16V0z" />
                        </svg>
                        班级管理
                    </a>
                </li>
                <li>
                    <a href="./update.html" class="nav-link text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-wrench-adjustable" viewBox="0 0 16 16">
                            <path d="M16 4.5a4.492 4.492 0 0 1-1.703 3.526L13 5l2.959-1.11c.027.2.041.403.041.61Z" />
                            <path
                                d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.49 4.49 0 0 0 11.5 9Zm-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376ZM3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
                        </svg>
                        修改信息
                    </a>
                </li>
            </ul>
        </div>
        <!-- 主内容区 -->
        <div class="b-example-divider" style="width: calc(100vw - 280px)">
            <div class="row"
                style="height: 66px; background-color: #3B95DD;font-size: 30px;color: #fff;font-weight: 700;">
                <div class="col-xxl-7" style="line-height: 66px;margin-left: 100px;">
                    <span id="showTime">2023-7-9 12:00:00</span>
                </div>
                <div class="col-xxl-3" style="margin-left: 100px;margin-top: 10px;font-size: 22px;">
                    欢迎你 <span id="loginname">文渊</span>&emsp;
                    <img id="avatar" style="border-radius: 50%;" width="50px" height="50px"
                        src="https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG"
                        alt="">&emsp;
                    <button onclick="logout()" style="height: 30px" class="btn btn-danger btn-sm">退出</button>
                </div>
            </div>
            <!-- 真正的内容区域 -->
            <div style="width: 70%;margin: 50px auto 0;">
                <div style="margin-bottom: 20px;">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#studentmodal" onclick="getClazzInfo()">添加</button>
                    &emsp;
                    <button class="btn btn-info" onclick="window.location.reload()">查询所有</button>
                    &emsp;
                    <input type="text" placeholder="请输入您要查询的姓名" id="searchkeywords" style="border: 2px solid green;height:38px;width: 250px;vertical-align: top;text-indent: 1em;">
                    <button class="btn btn-success" onclick="searchstudent()">查询</button>
                    &emsp;
                    &emsp;
                    <select id="clazzInfo" style="height: 38px;background: pink;border: 2px solid grey;width: 100px;">
                        <option value="-1">请选择</option>
                        <option value="1">一班</option>
                        <option value="2">二班</option>
                        <option value="3">三班</option>
                    </select>
                </div>
                <table class="table table-striped">
                    <thead>
                        <tr align="center">
                            <th>编号</th>
                            <th>账号</th>
                            <th>头像</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>邮箱</th>
                            <th>班级</th>
                            <th>学科</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="studentBody">

                    </tbody>
                </table>
                <button onclick="pagefirst()">首页</button>
                <button onclick="pageup()">上一页</button>
                <button onclick="pagedown()">下一页</button>
                <button onclick="pagelast()">尾页</button>
                <select id="changepagenum" style="height: 30px;border: 2px solid;">
                    <option value="-1">请选择</option>
                    <option value="5">5条</option>
                    <option value="8" selected>8条</option>
                    <option value="10">10条</option>
                </select>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="studentmodal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title" id="studenttitle">添加</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <!-- 模态框内容 -->
                    <div class="modal-body" style="margin-right: 10px;">
                        <input type="hidden" id="sid">
                        <div class="row">
                            <span class="col-xxl-3" style="font-size: 20px;">学生账号:</span>
                            <input class="col-xxl-9" type="text" placeholder="请输入学生账号" id="account">
                        </div>
                        <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生密码:</span>
                            <input class="col-xxl-9" type="text" placeholder="请输入学生密码" id="password">
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生头像:</span>
                            <form style="width: 50px;height: 50px;" id="formEle">
                                <label>
                                    <img id="imgEle" style="width: 50px;height: 50px;"
                                        src="http://s08vr7vdh.hn-bkt.clouddn.com/avatar.png" alt="">
                                    <input id="inpEle" type="file" name="wy" style="visibility: hidden;">
                                </label>
                            </form>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生姓名:</span>
                            <input class="col-xxl-9" type="text" placeholder="请输入学生姓名" id="sname">
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生性别:</span>
                            <label class="col-xxl-2">男&emsp;<input type="radio" checked class="sex" name="sex"
                                    value="男"></label>
                            <label class="col-xxl-2">女&emsp;<input type="radio" class="sex" name="sex"
                                    value="女"></label>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生年龄:</span>
                            <input class="col-xxl-9" type="number" id="age" placeholder="请输入学生年龄">
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">邮箱:</span>
                            <input class="col-xxl-9" type="email" id="email" placeholder="请输入学生邮箱">
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <span class="col-xxl-3" style="font-size: 20px;">学生班级:</span>
                            <select id="clazzid" class="col-xxl-9">
                                <option value="-1">请选择</option>
                            </select>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" onclick="submitstudent()">确认</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>
    </main>
    <script src="./js/header.js"></script>
    <!-- 权限判断 -->
    <script src="./js/level.js"></script>
    <script src="./js/student.js"></script>
    <!-- 图片上传 -->
    <script src="./js/upload.js"></script>
    <script>
        var index = 0;
        function handlercontract(){
            const contract = document.getElementById("contract")
            const divider = document.querySelector(".b-example-divider")
            contract.style.transition = "2s all"
            index++;
            if(index % 2){
                contract.style.width = "160px"
                divider.style.width = "calc(100vw - 160px)"
            }else{
                contract.style.width = "280px"
            }
        }
    </script>
</body>

</html>